<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <link rel="stylesheet" href="../assets/css/common.css">
    <link rel="stylesheet" href="../assets/css/vue.css">
    <script src="../assets/js/vue.js"></script>
    <script src="../assets/js/jquery.js"></script>
</head>
<body>
<div id="app">
    <a href="../index.html" class="retu">BACK</a>
    <h1>实例1</h1>
    <p><span>{{ num }}</span></p>
    <p><button @click="add()">增加</button></p>
    <p><button onclick="reduce()">减少</button></p>
    <p><button onclick="reduceOnce()">只执行一次</button></p>
    <p><button onclick="off()">关闭事件</button></p>
</div>
<script type="text/javascript">

    //$on  在构造器的外面执行内部的方法
    //$emit  绑定方法执行
    //$off   关闭事件


    var app = new Vue({
        el : '#app',
        data : {
          num : 1
        },
        methods:{
            add:function () {
                this.num++;
            }
        }
    });

    // $on 在构造器外部添加事件
    app.$on('reduce',function () {
        console.log('执行了方法reduce()');
        this.num--;
    });

    function reduce() {
        app.$emit('reduce');
    }

    //$once执行一次的事件
    app.$once('reduceOnce',function(){
        console.log('只执行了一次的方法');
        this.num--;
    });

    //只执行一次
    function reduceOnce() {
        app.$emit('reduceOnce');
    }


    //关闭事件
    function off() {
        app.$off('reduce');
    }


</script>
</body>
</html>